﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>响应式</title>
    <style type="text/css">
        body
        {
            margin: 0 auto;
        }
        ul
        {
            padding:0;
            margin:0;
            }
        a
        {
            text-decoration: none;
            color: white;
            font-size: 14pt;
            padding: 0px 3px;
            display: block;
        }
        .menu
        {
            background: red;
        }
        
        .menu li
        {
            display: block;
            float: left;
            margin: 3px;
            background: grey;
            width: 140px;
            text-align: center;
            color: white;
            font-size: 9pt;
        }
        #logo
        {
            background: white;
            width: 230px;
        }
        #logo a
        {
            color: Gray;
            font-size: 35pt;
            background: white;
        }
        #toplogo
        {
            display: none;
            margin: 0 auto;
            text-align: center;
        }
        #toplogo a
        {
            color: Black;
            font-size: 35pt;
        }
        @media only screen and (min-width: 585px) and (max-width: 823px)
        {
            #logo
            {
                display: none;
            }
            #toplogo
            {
                display: block;
                width: 100%;
            }
            .menu
            {
                width: 585px;
                background: red;
            }
        }
        @media only screen and (max-width: 585px)
        {
            #logo
            {
                display: none;
            }
            #toplogo
            {
                display: block;
                width: 100%;
            }
            .menu
            {
                width: 100%;
            }
            .menu li
            {
                width: 100%;
                float: left;
            }
        
        }
    </style>
</head>
<body>
    <ul class="menu">
        <div id="toplogo">
            <a href="#">慕课网</a></div>
        <li><a href="#">课程大厅</a><br />
            IT课程都在这里啦</li>
        <li><a href="#">学习中心</a><br />
            好好学习，天天向上</li>
        <li id="logo"><a href="#">慕课网</a></li>
        <li><a href="#">个人中心</a><br />
            个人信息 修改密码</li>
        <li><a href="#">关于我们</a><br />
            单位地址 应聘信息</li>
    </ul>
</body>
</html>
